<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-header></my-header>
  </div>

  <!-- 自定义模板 -->
  <script type="text/template" id="myHeader">
    <a href="#app">链接</a>
    <div>这是自定义的组件 {{ message }}</div>
    <div>{{ message.split('').reverse().join('') }}</div>
    <button @click="handleChange">修改message</button>
  </script>

  <script src="./lib/vue.global.js"></script>
  <script>
    // 定义一个组件的选项对象
    const options = {
      // // 组件的视图模板
      // template: `
      //   <div>这是自定义的组件 {{ message }}</div>
      //   <div>{{ message.split('').reverse().join('') }}</div>
      //   <button @click="handleChange">修改message</button>
      // `,

      template: '#myHeader', // 查找 id 为 #myHeader 的模板
      data() {
        return {
          message: 'Hello'
        }
      },
      methods: {
        handleChange() {
          this.message = '你好!!!'
        },
      },
    }


    // 创建实例
    const app = Vue.createApp({
      
    })

    // 可以调用 app.component(name, options) 来全局注册组件
    app.component('MyHeader', options)

    // // 注意，在要将组件名称与 html 标签名称重名
    // app.component('Header', options)

    // 要渲染注册的组件，使用组件名称小写短横线命名规范作为标签名称使用

    // 挂载
    app.mount('#app')
  </script>
</body>
</html>